<template>
	<view class="myRentOrder">
		<view class="day paddingTop10 disFlex">
			<view @tap="changeIndex(val.index,index)" :class="activeIndex == index?'activeColor':''" v-for="(val,index) in dayList " :key="index">{{val.name}}</view>
		</view>
		<view class="maxBox" v-if="list.length>0">
			<view class="box10 " v-for="(v,i) in list" :key='i' @tap="getnav(router(`${v.to}?id=${v.id}`))">
				<view class="sBox disFlex">
					<view class="time">{{v.create_time}}</view>
					<view class="status">{{v.type}}</view>
				</view>
				<view class="list" v-for="(val,index) in v.detail" :key='index'>
					<view class="info">
						<image :src="val.cover" mode=""></image>
						<view class="goodsInfo">
							<view class="name line1">{{val.title}}</view>
							<view class="remark line1">{{val.spec}}</view>
							<view class="priceBox ">
								<view class="price">{{val.price}}</view>
								<view class="btns">
									<view class="nums">{{val.number}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="all disFlex" >
					<view class="numBox">
						<text class="nums">共计{{v.detail.length}}件商品  总计:</text>
						<text class="price">{{v.price}}</text>
					</view>
					<button   @tap.stop="perform(v.to,v,v.price)" >{{v.typebtn}}</button>
					<!-- <button v-if="livertype" @tap="getnav(router(`waitDeliverGoodsDetail`))" >提醒发货</button>
					<button v-if="Goodstype" @tap="getnav(router(`waitGetGoodsDetail`))"  >确认收货</button>
					<button v-if="Returntype" @tap="getnav(router(`waitReturnDetail`))">去归还</button> -->
				</view>
			</view>
		</view>
		<view class="" style="text-align: center;margin-top: 20%;height: 100vh;color: #CCCCCC;" v-else>
			暂无数据~
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex:0,
				dayList:[{index:'',name:'全部'},{index:'1',name:'待付款'},{index:'3',name:'待发货'},{index:'4',name:'待收货'},{index:'5',name:'待归还'},{index:'7',name:'已完成'}],
				list:[],
				isshow:true,
				// Paytype:false,
				// livertype:false,
				// Goodstype:false,
				// Returntype:false,
			}
		},
		onLoad(option) {
			this.changeIndex (option.type)
		},
		methods: {
			changeIndex (i,index) {
				// if (index ==- this.activeIndex) {
				// 	return;
				// }
				this.activeIndex = index;
				 if(index==2){
					this.getlist([2,3])
				}else if(index==4){
					this.getlist([5,6])
				}else{
					this.getlist([i])
				}
		},
		getlist(i){
			this.list=[],
			i.map((i)=>{
			this.http('/api/standard_order/index', 'post', {type:i}, )
				.then((res) => {
					let r=res.data.data
					r.map((v)=>{
						if(v.status==1){
							v.typebtn='去付款'
							v.type='待付款'
							v.to='waitPayDetail'
						}else if(v.status==2||v.status==3&&v.deliver_type==1){
							v.typebtn='查看订单'
							v.type='待发货'
							v.to='waitDeliverGoodsDetail'
						}else if(v.status==2||v.status==3&&v.deliver_type==2){
							v.typebtn='提醒发货'
							v.type='待发货'
							v.to='waitDeliverGoodsDetail'
						}else if(v.status==4){
							v.typebtn='确认收货'
							v.type='待收货'
							v.to='waitGetGoodsDetail'
						}else if(v.status==5){
							v.typebtn='去归还'
							v.type='待归还'
							v.to='waitReturnDetail'
						}else if(v.status==6){
							v.typebtn='查看订单'
							v.type='待归还'
							v.to='waitReturnDetail'
						}else if(v.status==7){
							v.typebtn='查看订单'
							v.type='已完成'
							v.to='successDetail'
						}
					this.list.push(v)
					})
					console.log(this.list)
				})
			})
		},
		perform(to,v,price){
			if(to=='waitPayDetail'){
				let openid= uni.getStorageSync('userinfo').openid;
				this.pay(v.id,openid,price)
			}else if(to=='waitDeliverGoodsDetail'&&v.deliver_type==1){
				this.getnav(this.router(`waitDeliverGoodsDetail?id=${v.id}`))
			}else if(to=='waitDeliverGoodsDetail'&&v.deliver_type==2){
				this.remind(v.id)
			}else if(to=='waitGetGoodsDetail'){
				this.goods(v.id)
			}else if(to=='waitReturnDetail'){
				this.getnav(this.router(`waitReturnDetail?id=${v.id}`))
			}else if(to=='successDetail'){
				this.getnav(this.router(`successDetail?id=${v.id}`))
			}
		},
		pay(id,openid,price){
			let _this=this
			uni.showModal({
				title:'提示',
				content:'是否进行支付？',
				cancelColor:'#BEC9D7',
				confirmText:'确认',
				success: (e) => {
					if (e.confirm) {
						this.http('/api/standard_order/pay1', 'post', {id,openid}, )
							.then((res) => {
								console.log(res)
								if(res.sta==200){
									uni.requestPayment({
									    provider: 'wxpay',
									    timeStamp: res.msg.time,
									    nonceStr: res.msg.nonce_str,
									    package: res.msg.package,
									    signType: "MD5",
									    paySign: res.msg.sign,
									    success: function (res) {
									        uni.showToast({ title: '支付成功!', icon: 'none' })
									        setTimeout(()=>{
									        	
									        	uni.redirectTo({
									        		url:`/pages/index/pay/paySuccess?ip=myRentOrder&type=${''}`
									        	})
									        },1000)
									    },
									    fail: function (err) {
									       uni.showToast({ title: '支付失败!', icon: 'none' })
										   uni.redirectTo({
										   	url:`/pages/index/pay/payFail?ip=myRentOrder&type=${''}`
										   })
									       
									    }
									});
								}
							})
					}
				}
			})
			
		},
		remind(id){
			uni.showModal({
				title:'提示',
				content:'是否提醒发货？',
				cancelColor:'#BEC9D7',
				confirmText:'确认',
				success: (e) => {
					if (e.confirm) {
						this.http('/api//standard_order/update', 'post', {id}, )
							.then((res) => {
								console.log(res)
								if(res.sta==1){
									uni.showToast({ title: '提醒成功!', icon: 'none' })
								}
							})
					}
				}
			})
			
		},
		goods(id) {
			uni.showModal({
				title:'提示',
				content:'是否确认收货？',
				cancelColor:'#BEC9D7',
				confirmText:'确认',
				success: (e) => {
					if (e.confirm) {
						this.http('/api/standard_order/receiving', 'post', {id}, )
							.then((res) => {
								if(res.sta==200){
									this.getnav(this.router(`myRentOrder?type=${''}`));
									uni.showToast({ title: '收货成功!', icon: 'none' })
									
								}
							})
					}
				}
			})
		}
	},
	}
</script>

<style lang="less">
	.myRentOrder{
		.day{
			padding: 0 40rpx;
			view{
				font-size:30rpx;
				// color:rgba(153,153,153,1);
			}
			.activeColor{
				color: #2291FF;
				position: relative;
				&::after{
					content: '';
					position: absolute;
					left: 0;
					bottom: -24rpx;
					z-index: 1;
					width: 100%;
					height: 8rpx;
					border-radius: 4px;
					background-color: #2291FF;
				}
			}
		}
		.maxBox{
			padding-top: 40rpx;
			.sBox{
				padding: 0 40rpx;
				margin-top: 33rpx;
				.time{
					color: #BDC9D7;
				}
				.status{
					color: #2291FF;
				}
			}
			.list{
				margin-top: 50rpx;
				padding: 0 40rpx;
				display: flex;
				align-items: center;
				.icon-xuanzhong{
					color: #2291FF;
				}
				.info{
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					align-items: center;
					image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
					}
					.goodsInfo{
						flex: 1;
						height: 160rpx;
						padding-left: 28rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.name{
							font-weight: bold;
							font-size:32rpx;
						}
						.remark{
							font-size:24rpx;
							color:rgba(190,201,215,1);
						}
					}
					.priceBox{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.price{
							font-size: 36rpx;
							color: #FE7203;
							font-weight: bold;
							&:after{
								content: '/件/天';
								font-size: 24rpx;
								font-weight: normal;
							}
						}
						.btns{
							display: flex;
							align-items: center;
							button{
								width:44rpx;
								height:44rpx;
								background:rgba(245,245,249,1) !important;
								border-radius:10rpx;
								line-height: 44rpx;
								text-align: center;
							}
							.nums{
								width:100rpx;
								height:44rpx;
								background:rgba(245,245,249,1);
								border-radius:10rpx;
								line-height: 44rpx;
								text-align: center;
								margin: 0 10rpx;
							}
						}
					}
				}
			}
			.all{
				padding: 100rpx 40rpx 40rpx 40rpx;
				.numBox{
					.text{
						font-size: 30rpx;
					}
					.price{
						color: #FE7203;
						font-size: 36rpx;
						font-weight: bold;
						&::before{
							font-size: 30rpx;
							font-weight: normal;
						}
					}
				}
				button{
					width:180rpx;
					height:70rpx;
					background:rgba(34,145,255,1) !important;
					border-radius:10rpx;
					outline: none;
					line-height: 70rpx;
					border: 0;
					color: #fff;
					font-size: 32rpx;
				}
			}
		}
		
	}
</style>
